mapbox-to-ol-style
Utilities for creating OpenLayers style functions from Mapbox Style objects.
Getting started
To use a standalone build of mapbox-to-ol-style, just include 'dist/mb2olstyle.js' on your HTML page. Otherwise just import the mapbox-to-ol-style module, like in the snippet below.
The code below creates a vector layer with a style from a Mapbox Style object:
import mb2olstyle from 'mapbox-to-ol-style';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import GeoJSON from 'ol/format/geojson';
var layer = new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: 'data/states.geojson'
})
});
fetch('data/states.json').then(function(response) {
response.json().then(function(glStyle) {
layer.setStyle(mb2olstyle(glStyle, 'states'));
});
});
API
index
Creates a style function from the glStyle
object for all layers that use
the specified source
, which needs to be a "type": "vector"
or
"type": "geojson"
source.
Parameters
glStyle
(string | Object) Mapbox Style object.source
(string | Array<string>) source
key or an array of layer id
s
from the Mapbox Style object. When a source
key is provided, all layers for
the specified source will be included in the style function. When layer id
s
are provided, they must be from layers that use the same source.resolutions
Array<number> Resolutions for mapping resolution to zoom level. For tile layers, this can
be layer.getSource().getTileGrid().getResolutions()
. (optional, default [156543.03392804097, 78271.51696402048,39135.75848201024,19567.87924100512,9783.93962050256, 4891.96981025128,2445.98490512564,1222.99245256282,611.49622628141, 305.748113140705,152.8740565703525,76.43702828517625,38.21851414258813, 19.109257071294063,9.554628535647032,4.777314267823516,2.388657133911758, 1.194328566955879,0.5971642834779395,0.29858214173896974, 0.14929107086948487,0.07464553543474244]
)spriteData
Object Sprite data from the url specified in
the Mapbox Style object's sprite
property. Only required if a sprite
property is specified in the Mapbox Style object. (optional, default undefined
)spriteImageUrl
Object Sprite image url for the sprite
specified in the Mapbox Style object's sprite
property. Only required if a
sprite
property is specified in the Mapbox Style object. (optional, default undefined
)fonts
Array<string> Array of available fonts, using the
same font names as the Mapbox Style object. If not provided, the style
function will always use the first font from the font array. (optional, default undefined
)
Returns ol.style.StyleFunction Style function for use in
ol.layer.Vector
or ol.layer.VectorTile
.
Building the library
npm install
The resulting binary (mb2olstyle.js
) will be in the dist/
folder. To see the library in action, navigate to example/index.html
.